<template>
    <div class="person-root-div">
        <el-select v-if="!noSelect" v-model="selectValue" multiple placeholder="请选择" clearable @change="selectChange"
            style="width: 340px;margin-bottom: 10px">
            <el-option v-for="(item, idx) in staffList" :key="idx" :label="getItemName(item)" :value="item.id" />
        </el-select>
        <div class="item-div" v-if="!noShowImg">
            <div class="item" v-for="(item, idx) in valueList" :key="idx">
                <el-image :src="item.avatar" :preview-src-list="[item.avatar]" fit="cover" />
                <div class="info">
                    <div class="name">{{ item.name || '--' }}</div>
                    <div>{{ item.job || '--' }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script setup>
import { apiGetDetectionStaffList } from '@/api/staff';
const emits = defineEmits(['updateList']);

const selectValue = ref([]);
const valueList = ref([]);
const staffList = ref([])

const props = defineProps({
    noSelect: {
        type: Boolean,
        defautl: false
    },
    noShowImg: {
        type: Boolean,
        defautl: false
    },
    defaultList: {
        type: Array,
        defautl: () => {
            return []
        }
    }, //需要回显的数据
})

watch(() => props.defaultList, value => {
    setList()
})

const setList = () => {
    if (props.defaultList && props.defaultList.length > 0) {
        valueList.value = JSON.parse(JSON.stringify(props.defaultList))

        selectValue.value = []
        valueList.value.map(item => {
            if (item.id) {
                selectValue.value.push(item)
            }
        })
        let list = JSON.parse(JSON.stringify(valueList.value))
        emits('updateList', list)
    }
}

//获取可选择用户列表
const getUserList = () => {
    apiGetDetectionStaffList().then(res => {
        if (res.data) {
            staffList.value = res.data || []
        } else {
            proxy.$modal.msgError("检测人员数据错误");
        }
    })
}

setList()
getUserList()

const getItemName = (item) => {
    if (item) {
        return (item.name || '') + (item.job ? '(' + item.job + ')' : '')
    }
    return ''
}

const selectChange = (arr) => {
    valueList.value = []
    if (staffList.value.length > 0) {
        staffList.value.map(item => {
            for (let i = 0; i < arr.length; i++) {
                if (item.id == arr[i]) {
                    valueList.value.push(item)
                    break
                }
            }
        })
    }
    let list = JSON.parse(JSON.stringify(valueList.value))
    emits('updateList', list)
};

const checkValid = (callBack) => {
    if (valueList.value && valueList.value.length > 0) {
        callBack(true)
    } else {
        callBack(false)
    }
}

defineExpose({
    checkValid
})
</script>
  
<style lang='scss' scoped>
.person-root-div {

    .item-div {
        display: flex;
        align-items: center;
        flex-flow: wrap;
    }

    .necessary-tag {
        font-size: 18px;
        color: red;
    }

    .item {
        display: flex;
        align-items: center;
        margin: 10px;

        .info {
            font-size: 12px;
            color: #000;
            margin-left: 10px;
            line-height: 20px;
        }

        .name {
            font-size: 15px;
            font-weight: bold;
        }

        .el-image {
            width: 40px;
            height: 40px;
            border-radius: 60px;
        }
    }
}
</style>